<template>
  <div class="container">
    <div class="app-container">
      <!-- 角色管理内容 -->
      <div class="role-operate">
        <el-button size="mini" type="primary" @click="addData"
          >添加角色</el-button
        >
      </div>
      <!-- 放置table组件 -->
      <el-table :data="list">
        <!-- 放置列 -->
        <el-table-column prop="name" align="center" width="200" label="角色">
          <template v-slot="{ row }">
            <!-- 条件判断 -->
            <el-input
              v-if="row.isEdit"
              v-model="row.editRow.name"
              size="mini"
            />
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" align="center" width="200" label="启用">
          <template v-slot="{ row }">
            <el-switch
              v-if="row.isEdit"
              v-model="row.editRow.state"
              :active-value="1"
              :inactive-value="0"
              inactive-color="#ff4949"
            />
            <span v-else>
              <el-tag :type="formatInfoType(row.state)">{{
                formatStatus(row.state)
              }}</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="description" align="center" label="描述">
          <template v-slot="{ row }">
            <el-input
              v-if="row.isEdit"
              v-model="row.editRow.description"
              size="mini"
              type="textarea"
            />
            <span v-else>{{ row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <template v-if="row.isEdit">
              <el-button type="primary" size="mini" @click="btnEditOK(row)"
                >确定</el-button>
              <el-button size="mini" type="danger" @click="row.isEdit = false"
                >取消</el-button>
            </template>
            <template v-else>
              <el-button size="mini" type="text">分配权限</el-button>
              <el-button
                size="mini"
                type="text"
                @click="btnEditRow(row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="DeleteData(row.id)"
                >删除</el-button
              >
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页组件 -->
      <el-row type="flex" style="height: 60px" align="middle" justify="center">
        <el-pagination
          :total="total"
          :page-size="params.pagesize"  每页显示条数
          :current-page="params.page"   当前页
          background
          layout="total,prev, pager, next"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <el-dialog
      width="500px"
      title="添加角色"
      :visible.sync="showDialog"
      @close="closeDialog"
    >
      <!-- 表单内容 -->
      <el-form label-width="120px" ref="form" :model="roleForm" :rules="rules">
        <el-form-item label="角色名称" prop="name">
          <el-input style="width: 300px" size="mini" v-model="roleForm.name" />
        </el-form-item>
        <el-form-item label="启用" prop="state">
          <el-switch
            v-model="roleForm.state"
            :active-value="1"
            :inactive-value="0"
            inactive-color="#ff4949"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input
            type="textarea"
            :rows="3"
            style="width: 300px"
            size="mini"
            v-model="roleForm.description"
          />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="submitForm"
                >确定</el-button
              >
              <el-button size="mini" type="danger" @click="closeDialog">
                取消</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getRoleListApi,
  addRoleApi,
  deleteRoleApi,
  getRoleDetailApi,
  editRoleApi,
} from "@/api/role";
export default {
  name: "Role",
  data() {
    return {
      total: 0,
      showDialog: false,
      roleForm: {
        name: "",
        description: "",
        state: 0, // 默认未1启用 关闭 0 打开1
      },
      rules: {
        name: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
        description: [
          { required: true, message: "角色描述不能为空", trigger: "blur" },
        ],
      },
      params: {
        page: 1,
        pagesize: 5,
      },
      list: [],
    };
  },
  created() {
    this.getRoleList();
  },
  methods: {
    async getRoleList() {
      const res = await getRoleListApi(this.params);
      this.total = res.total;
      this.list = res.rows;
      this.list.forEach((item) => {
        this.$set(item, "isEdit", false);
        this.$set(item, "editRow", {
          name: item.name,
          state: item.state,
          description: item.description,
        });
      });
    },
    addData() {
      this.showDialog = true;
    },
    btnEditRow(row) {
      row.isEdit = true; // 改变行的编辑状态
      // 更新缓存数据
      row.editRow.name = row.name;
      row.editRow.state = row.state;
      row.editRow.description = row.description;
    },
    async btnEditOK(row) {
      if (row.editRow.name && row.editRow.description) {
      await editRoleApi({...row.editRow,id:row.id})
      this.$message.success("更新角色成功");
      row.isEdit = false;
      Object.assign(row, {
          ...row.editRow,
          isEdit: false // 退出编辑模式
        }) // 规避eslint的误判
      } else {
        this.$message.warning('角色和描述不能为空')
      }
    },
    async submitForm() {
      this.$refs.form.validate(async (isOK) => {
        if (isOK) {
          await addRoleApi(this.roleForm);
          this.$message.success("添加成功");
          this.closeDialog();
          this.getRoleList();
        }
      });
    },
    DeleteData(id) {
      this.$confirm("确定要删除该角色吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await deleteRoleApi(id);
        this.$message.success("删除成功");
        this.getRoleList();
      });
    },
    handleCurrentChange(currentPage) {
      this.params.page = currentPage;
      this.getRoleList();
    },

    closeDialog() {
      this.showDialog = false;
      this.$refs.form.resetFields();
    },
    formatInfoType(status) {
      const MAP = {
        0: "danger",
        1: "success",
      };
      // return 格式化之后的中文显示
      return MAP[status];
    },
    formatStatus(type) {
      //中括号取值法
      const TYPEMAP = {
        0: "未启用",
        1: "已启用",
      };
      return TYPEMAP[type];
    },
  },
};
</script>
<style scoped>
.role-operate {
  padding: 10px;
}
</style>
